<!-- 车型管理 -->
<template>
  <div class="vehicleMmanage-container">
    <div class="vehicleMmanage-container-header">
      <el-form :inline="true" label-width="80px" :model="VehicleManageForm">
        <el-row>
          <el-form-item label="车型编号:" style="margin-right: 60px;" prop="id">
            <el-input v-model.number="VehicleManageForm.id" placeholder="请输入车型编号" />
          </el-form-item>
          <el-form-item label="应载重量:" style="margin-right: 60px;">
            <el-select v-model="VehicleManageForm.allowableLoad" placeholder="请选择应载重量">
              <!-- label文字,value值 -->
              <el-option v-for="v in VehicleAllowableLoadArr" :key="v.id" :label="v.name" :value="v.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="应载体积:">
            <el-select v-model="VehicleManageForm.allowableVolume" placeholder="请选择应载体积">
              <el-option v-for="v in VehicleAllowableVolumeArr" :key="v.id" :label="v.name" :value="v.value" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="车辆类型:" style="margin-right: 60px;" prop="name">
            <el-input v-model="VehicleManageForm.name" placeholder="请输入车辆类型" />
          </el-form-item>
          <el-form-item>
            <el-button @click="searchVehicle">搜索</el-button>
            <el-button class="reset" @click="resetVehicle">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="vehicleMmanage-container-footer">
      <el-card shadow="never">
        <el-button class="addVehicle" @click="visible = true">新增车型</el-button>
        <el-table :data="VehicleTable" stripe style="width: 100%" fit>
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="id" label="车型编号" min-width="180" align="left" />
          <el-table-column prop="name" label="车辆类型" min-width="130" align="left" />
          <el-table-column prop="num" label="车型数量" min-width="100" />
          <el-table-column prop="allowableLoad" label="应载重量(吨)" min-width="150" />
          <el-table-column prop="allowableVolume" label="应载体积(立方米)" min-width="150" />
          <el-table-column prop="measureLong" label="长(米)" min-width="100" />
          <el-table-column prop="measureWidth" label="宽(米)" min-width="100" />
          <el-table-column prop="measureHigh" label="高(米)" min-width="100" />
          <el-table-column
            fixed="right"
            label="操作"
            width="130"
            align="center"
          >
            <template #default="{row}">
              <el-button type="text" @click="edit(row.id)">编辑</el-button>
              <el-divider direction="vertical" />
              <el-button type="text" class="del" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <!-- 这里要转一个数据类型 total -->
          <el-pagination
            :current-page="VehicleManageForm.page"
            :page-size="VehicleManageForm.pageSize"
            :page-sizes="[5,20,30,50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="+total"
            @current-change="onPageChange"
          />
        </el-row>
      </el-card>
    </div>
    <!-- 新增和编辑弹框组件 -->
    <VehicleDialog ref="VehicleDialog" :visible.sync="visible" @getVehiclePage="getVehiclePage" />
  </div>
</template>

<script>
import { delVehicleAPI, getVehiclePageAPI } from '@/api/car-models'
import VehicleDialog from './components/popup'
export default {
  name: 'VehicleManage',
  components: { VehicleDialog },
  data() {
    return {
      // 查询分页数据的参数对象
      VehicleManageForm: {
        page: 1, // 当前页
        pageSize: 5,
        allowableLoad: '',
        allowableVolume: '',
        name: '',
        id: ''
      },
      VehicleTable: [], // 存储分页数据
      total: 0, // 总条数
      visible: false, // 控制弹框显示隐藏
      // 搜索--应载重量数组
      VehicleAllowableLoadArr: [
        {
          value: 'RANGE_LEVEL_1',
          name: '<1.8(吨）'
        },
        {
          value: 'RANGE_LEVEL_2',
          name: '1.8-6(吨）'
        },
        {
          value: 'RANGE_LEVEL_3',
          name: '6-14(吨）'
        },
        {
          value: 'RANGE_LEVEL_4',
          name: '14-30(吨）'
        },
        {
          value: 'RANGE_LEVEL_5',
          name: '30-50(吨）'
        },
        {
          value: 'RANGE_LEVEL_6',
          name: '50-100(吨）'
        },
        {
          value: 'RANGE_LEVEL_7',
          name: '100>（吨）'
        }
      ],
      // 搜索--应载体积数组
      VehicleAllowableVolumeArr: [
        {
          value: 'RANGE_LEVEL_1',
          name: '<3(m³)'
        },
        {
          value: 'RANGE_LEVEL_2',
          name: '3-5(m³)'
        },
        {
          value: 'RANGE_LEVEL_3',
          name: '5-10(m³)'
        },
        {
          value: 'RANGE_LEVEL_4',
          name: '10-15(m³)'
        },
        {
          value: 'RANGE_LEVEL_5',
          name: '15-30(m³)'
        },
        {
          value: 'RANGE_LEVEL_6',
          name: '30-50(m³)'
        },
        {
          value: 'RANGE_LEVEL_7',
          name: '50-80(m³)'
        },
        {
          value: 'RANGE_LEVEL_8',
          name: '80-150(m³)'
        },
        {
          value: 'RANGE_LEVEL_9',
          name: '150>(m³)'
        }
      ]
    }
  },
  created() {
    this.getVehiclePage()
  },
  methods: {
    // 获取车辆类型分页数据
    async getVehiclePage(page) {
      if (page) this.VehicleManageForm.page = page // 子组件调用父组件函数会传参数,那就把当前页码变为1,查询第一页数据
      const result = await getVehiclePageAPI(this.VehicleManageForm)
      this.total = result.data.counts // 总条数
      this.VehicleManageForm.page = result.data.page // 当前页
      this.VehicleTable = result.data.items // 分页数组
    },
    // 页码改变时触发
    onPageChange(page) {
      this.VehicleManageForm.page = page
      this.getVehiclePage() // 重新渲染页面
    },
    // 编辑
    edit(id) {
      this.visible = true // 打开弹框
      this.$refs.VehicleDialog.getVehicleDetails(id) // 调用子组件方法,并传id
    },
    // 删除
    async del(id) {
      await delVehicleAPI(id)
      if (this.VehicleTable.length === 1 && this.VehicleManageForm.page > 1) this.VehicleManageForm.page--
      this.getVehiclePage()
      this.$message.success('删除成功')
    },
    // 搜索分页列表
    searchVehicle() {
      this.getVehiclePage()
    },
    // 重置
    resetVehicle() {
      this.VehicleManageForm = {
        page: 1, // 当前页
        pageSize: 5,
        allowableLoad: '',
        allowableVolume: '',
        name: '',
        id: ''
      }
      this.getVehiclePage()
    }
  }
}
</script>

<style lang="scss" scoped>
.vehicleMmanage-container-header,.vehicleMmanage-container-footer{
  background-color: #fff;
}
.vehicleMmanage-container-header{
  padding: 20px 20px 0 0;
  margin-bottom: 20px;
 ::v-deep .el-input,.el-select{
  width:250px
  }
  ::v-deep .el-button{
    width: 100px;
    height: 40px;
    background: #e15536;
    border-radius: 4px;
    color: #fff;
}
.reset{
  background-color: #fff;
  color: black;
}
}
.del{
  color: #e15536;
}
.el-pagination{
  margin-top: 20px;
}
.addVehicle{
  width: 100px;
    height: 40px;
    background: #e15536;
    border-radius: 4px;
    color: #fff;
  margin-bottom: 20px;
}
::v-deep .el-row{
  margin-left: 30px;
}
</style>
